<template>
  <div class="app-container home">



    <el-row :gutter="20">
      <el-col :sm="24" :lg="6" style="padding-left: 20px">
        <el-card :class="isSelect == 'xiaoyan' ? 'box-card1' : 'box-card'">
          <div class="card-flex" @click="select1('xiaoyan')">
            <img src="../../assets/images/girls.png" alt="" srcset="">
            <div class="flex-right">
              <div class="right1">小燕</div>
              <div class="right2">干净清澈</div>
              <div class="right3">推荐：亲切自然</div>
            </div>
          </div>

        </el-card>
      </el-col>
      <el-col :sm="24" :lg="6" style="padding-left: 20px">
        <el-card :class="isSelect == 'aisjiuxu' ? 'box-card1' : 'box-card'">
          <div class="card-flex" @click="select1('aisjiuxu')">
            <img src="../../assets/images/boys.png" alt="" srcset="">
            <div class="flex-right">
              <div class="right1">许久</div>
              <div class="right2">年轻温柔</div>
              <div class="right3">推荐：亲切自然</div>
            </div>
          </div>

        </el-card>
      </el-col>

      <el-col :sm="24" :lg="6" style="padding-left: 20px">
        <el-card :class="isSelect == 'aisxping' ? 'box-card1' : 'box-card'">
          <div class="card-flex" @click="select1('aisxping')">
            <img src="../../assets/images/girls.png" alt="" srcset="">
            <div class="flex-right">
              <div class="right1">小萍</div>
              <div class="right2">年轻温柔</div>
              <div class="right3">推荐：亲切自然</div>
            </div>
          </div>

        </el-card>
      </el-col>

      <el-col :sm="24" :lg="6" style="padding-left: 20px">
        <el-card :class="isSelect == 'aisjinger' ? 'box-card1' : 'box-card'">
          <div class="card-flex" @click="select1('aisjinger')">
            <img src="../../assets/images/girls.png" alt="" srcset="">
            <div class="flex-right">
              <div class="right1">小婧</div>
              <div class="right2">年轻温柔</div>
              <div class="right3">推荐：亲切自然</div>
            </div>
          </div>

        </el-card>
      </el-col>

      <el-col :sm="24" :lg="6" style="padding-left: 20px;margin-top: 20px;">
        <el-card :class="isSelect == 'aisbabyxu' ? 'box-card1' : 'box-card'">
          <div class="card-flex" @click="select1('aisbabyxu')">
            <img src="../../assets/images/girls.png" alt="" srcset="">
            <div class="flex-right">
              <div class="right1">小宝</div>
              <div class="right2">年轻温柔</div>
              <div class="right3">推荐：亲切自然</div>
            </div>
          </div>

        </el-card>
      </el-col>


      <el-col :sm="24" :lg="6" style="padding-left: 20px;margin-top: 20px;">
        <el-card :class="isSelect == 'x4_lingxiaowan_en' ? 'box-card1' : 'box-card'">
          <div class="card-flex" @click="select1('x4_lingxiaowan_en')">
            <img src="../../assets/images/girls.png" alt="" srcset="">
            <div class="flex-right">
              <div class="right1">聆小琬 </div>
              <div class="right2">年轻温柔</div>
              <div class="right3">推荐：(可防止发音错误，比如咳嗽发音错误)</div>
            </div>
          </div>

        </el-card>
      </el-col>

      <!--   <el-col :sm="24" :lg="6" style="padding-left: 20px;margin-top: 20px;">
        <el-card :class="isSelect == 'mary' ? 'box-card1' : 'box-card'">
          <div class="card-flex" @click="select1('mary')">
            <img src="../../assets/images/girls.png" alt="" srcset="">
            <div class="flex-right">
              <div class="right1">mary</div>
              <div class="right2">年轻温柔</div>
              <div class="right3">推荐：亲切自然</div>
            </div>
          </div>

        </el-card>
      </el-col> -->
    </el-row>
    <el-form ref="ruleForm" label-width="50px" class="demo-ruleForm">
      <el-form-item label="语速">
        <el-input v-model="ruleForm.xfSpeed"></el-input>
      </el-form-item>

      <el-form-item label="音量">
        <el-input v-model="ruleForm.xfVolume"></el-input>
      </el-form-item>

      <el-form-item label="音调">
        <el-input v-model="ruleForm.xfPitch"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        <el-button type="primary" @click="audition('ruleForm')">试 听</el-button>
      </el-form-item>
    </el-form>
    <audio id="audioPlayer" controls style="display:none"></audio>
  </div>
</template>

<script>

import { dragSysconfig, dragSysconfig1, listeningTest } from "@/api/system/user";

export default {
  components: {},
  data() {
    return {
      isSelect: 'xiaoyan',
      ruleForm: {
        xfSpeed: "",
        xfVolume: "",
        xfPitch: "",
      },
      item: [
        { isSelect: 'xiaoyan', name: '小燕' },
        { isSelect: 'aisjiuxu', name: '许久' },
        { isSelect: 'aisxping', name: '小萍' },
        { isSelect: 'aisjinger', name: '小婧' },
        { isSelect: 'aisbabyxu', name: '小宝' },
      ]
    };
  },
  watch: {

  },
  created() {
    this.getVoice()
  },
  methods: {
    select1(valueObj) {
      this.isSelect = valueObj
    },
    submitForm() {
      let obj = {
        id: 1,
        xfVoiceName: this.isSelect,
        xfSpeed: this.ruleForm.xfSpeed,
        xfVolume: this.ruleForm.xfVolume,
        xfPitch: this.ruleForm.xfPitch,
      }
      dragSysconfig1(obj).then(res => {
        if (res.code == 200) {
          this.$message({
            message: res.msg,
            type: 'success'
          });
        } else {
          this.$message({
            message: res.msg,
            type: 'warning'
          });
        }
      });
    },
    audition() {
      const text = this.item.filter(el => el.isSelect == this.isSelect)
      console.log(text,this.isSelect,this.item.filter(el => el.isSelect == this.isSelect));
      let obj = {
        xfVoiceName: this.isSelect,
        xfSpeed: this.ruleForm.xfSpeed,
        xfVolume: this.ruleForm.xfVolume,
        xfPitch: this.ruleForm.xfPitch,
        listeningTest: '你好'+ text[0].name
      }
      listeningTest(obj).then(res => {
      console.log(res.msg,process.env.VUE_APP_BASE_API + '/profile/upload/' + res.msg);

        if (res.code == 200) {
          var voiceUrl = process.env.VUE_APP_BASE_API + '/profile/upload/' + res.msg;
          document.getElementById('audioPlayer').src = voiceUrl;
          document.getElementById('audioPlayer').play();
        } else {
          this.$message.error('暂无语音文件,请先生成语音')
        }
      });
    },
    // value  1 男生 0 女生
    getVoice() {
      dragSysconfig(1).then(res => {
        if (res.code == 200) {
          this.isSelect = res.data.xfVoiceName
          this.ruleForm.xfSpeed = res.data.xfSpeed
          this.ruleForm.xfVolume = res.data.xfVolume
          this.ruleForm.xfPitch = res.data.xfPitch
        }
      });
    },
  }
};
</script>
<style>
.box-card1 {
  border: 1px solid #1d93ff;
}

.card-flex {
  display: flex;
  align-items: center;
}

.flex-right {
  margin-left: 25px;
}

.right1 {
  font-weight: 700;
  font-size: 18px;
}

.right2 {
  margin: 18px 0;
  color: #1d93ff;
}

.right3 {
  font-size: 15px;

}

.demo-ruleForm {
  width: 300px;
  margin-top: 30px;
}
</style>
